<template>
	<view>
		<view class="nav">
			<view class="nav-one">
				<p>建仓时间:</p>
				<p>平仓时间：</p>
				<p>交易标的：</p>
				<p>开仓价格：</p>
				<p>平仓价格：</p>
				<p>手数：</p>
				<p>合约价值：</p>
				<p>盈亏</p>
				<p>手续费</p>
				<p>单号</p>
				<p>止盈比例：</p>
				<p>止盈价格：</p>
				<p>止损比例：</p>
				<p>止损价格：</p>
				<p>延期费：</p>
				<p>方向</p>
				<p>状态</p>
			</view>
			<view class="nav-two">
				<p>{{ JSONdate.create_date | timing }}</p>
				<p>{{ JSONdate.update_date | timing }}</p>
				<p>{{ JSONdate.trade_kind }}</p>
				<p>{{ JSONdate.open_price }}</p>
				<p>{{ JSONdate.close_price}}</p>
				<p>{{ JSONdate.volumn }}</p>
				<p>{{ JSONdate.cost }}</p>
				<view>
					<view v-if="JSONdate.trade_type == 'sel'">
						<view v-if="JSONdate.trade_kind == 'BTCUSDT'">{{ ((JSONdate.open_price-JSONdate.close_price)* JSONdate.volumn * 10) | pointThree }}</view>
						<view v-if="JSONdate.trade_kind == 'ETHUSDT'">{{ ((JSONdate.open_price-JSONdate.close_price)*JSONdate.volumn * 40) | pointThree }}</view>
						<view v-if="JSONdate.trade_kind == 'LTCUSDT'">{{ ((JSONdate.open_price-JSONdate.close_price)*JSONdate.volumn * 50) | pointThree }}</view>
						<view v-if="JSONdate.trade_kind == 'IFLUSDT'">{{ ((JSONdate.open_price-JSONdate.close_price)*JSONdate.volumn * 80) | pointThree }}</view>
						<view v-if="JSONdate.trade_kind == 'ICLUSDT'">{{ ((JSONdate.open_price-JSONdate.close_price)*JSONdate.volumn * 80) | pointThree }}</view>
					</view>
					<view v-if="JSONdate.trade_type == 'buy'">            
						<view v-if="JSONdate.trade_kind == 'BTCUSDT'">{{ ((JSONdate.close_price-JSONdate.open_price)*JSONdate.volumn * 10) | pointThree }}</view>
						<view v-if="JSONdate.trade_kind == 'ETHUSDT'">{{ ((JSONdate.close_price-JSONdate.open_price)*JSONdate.volumn * 40) | pointThree }}</view>
						<view v-if="JSONdate.trade_kind == 'LTCUSDT'">{{ ((JSONdate.close_price-JSONdate.open_price)*JSONdate.volumn * 50) | pointThree }}</view>
						<view v-if="JSONdate.trade_kind == 'IFLUSDT'">{{ ((JSONdate.close_price-JSONdate.open_price)*JSONdate.volumn * 80) | pointThree }}</view>
						<view v-if="JSONdate.trade_kind == 'ICLUSDT'">{{ ((JSONdate.close_price-JSONdate.open_price)*JSONdate.volumn * 80) | pointThree }}</view>
					</view>
				</view>
				<p>{{JSONdate.cost*0.1}}</p>
				<p>{{JSONdate.receiptnum}}</p>
				<p>{{JSONdate.stop_win *100}}%</p>
				<p>{{JSONdate.stop_win_price}}</p>
				<p>{{JSONdate.stop_loss*100}}%</p>
				<p>{{JSONdate.stop_loss_price}}</p>
				<p>{{JSONdate.storage_cost}}</p>
				<view v-if="JSONdate.trade_type == 'buy'">
				           买入
				</view>
				<view v-if="JSONdate.trade_type == 'sel'">
				           卖出
				</view>
				<p v-if="JSONdate.remarks !== 'app'">{{JSONdate.remarks}}</p>
				<p v-if="JSONdate.remarks == 'app'">手动平仓</p>
			</view>
		</view>
	</view>
</template>
<script>
import request from '@/utils/request';
import { mapState, mapGetters } from 'vuex';
import moment from 'moment';
export default {
	data() {
		return {
			id: '',

			JSONdate: []
		};
	},
	created() {
		this.Historical();
	},
	onShow() {},
	filters: {
		pointThree(val) {
			return Number(val).toFixed(2);
		},

		timing(val) {
			return moment(val).format('YYYY-MM-DD HH:mm:ss');
		}
	},
	computed: {
		...mapState('user', ['userinfo']),
		...mapState('user', ['BTCUSDT']),
		...mapState('user', ['ETHUSDT']),
		...mapState('user', ['LTCUSDT']),
		...mapState('user', ['IFLUSDT']),
		...mapState('user', ['ICLUSDT'])
	},
	methods: {
		Historical() {
			let that = this;
			request('/trades/hisposition/get', 'POST', {
				guid: '001',
				loginId: that.userinfo.Customer.loginId,
				sessionId: that.userinfo.SessionId,
				positionId: that.id
			}).then(res => {
				console.log(res.data, 67676767);
				if (res.data.ResultCD == 'I001') {
					that.JSONdate = res.data.Position;
				}
				try {
					that.JSONdate = JSON.parse(res.data).Position;
				} catch (e) {
					//TODO handle the exception
					that.JSONdate = res.data.Position;
				}
			});
		}
	},
	onLoad(options) {
		this.id = options.id;
	}
};
</script>
<style lang="scss" scoped>
.nav {
	width: 80%;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding-top: 40upx;
	.nav-one {
		width: 48%;

		text-align: left;
	}
	.nav-two {
		width: 48%;

		text-align: left;
	}
}
</style>
